<template>
  <el-dialog :close-on-click-modal="false"   :title="form.id ? '编辑' : '新增'" :visible="show" :before-close="close" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="地点名称" prop="name"><el-input v-model="form.name" type="text" placeholder="请输入"></el-input></el-form-item>
        <el-form-item label="地点类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择">
            <el-option label="考勤点" :value="1"></el-option>
            <el-option label="考勤面" :value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="考勤半径" prop="radius">
            <!-- <el-select v-model="form.radius" placeholder="请选择">
            <el-option label="50米" :value="50"></el-option>
            <el-option label="100米" :value="100"></el-option>
            <el-option label="200米" :value="200"></el-option>
            <el-option label="300米" :value="300"></el-option>
            <el-option label="500米" :value="500"></el-option>
            <el-option label="1000米" :value="1000"></el-option>
            </el-select> -->
            <el-input v-model="form.radius" type="text" style="width:220px;" placeholder="请输入" @input="e => (form.radius=form.radius.replace(/^\D/g,''))">
                <template slot="append">米</template>
            </el-input>
        </el-form-item>
        <editMap ref="editMap" v-model="form.locations" :type="form.type" :radius="form.radius" height="500px"></editMap>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import editMap from '@/views/attendRoadLine/components/editMap.vue';
export default {
  components: {
    editMap
  },
  props: {
    /* 显示隐藏 */
    show: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: {}
    }
  },
  watch: {
    item: {
      handler(val) {
        this.form = val || {};
      },
      immediate: true
    },
    show: {
      handler(val) {
        if (val) {
          this.resetForm('form');
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      form: {},
      rules: {
        name: [{ required: true, message: '请输入内容', trigger: ['change', 'input'] }],
        type: [{ required: true, message: '请输入内容', trigger: ['change', 'input'] }],
        radius: [{ required: true, message: '请输入内容', trigger: ['change', 'input'] }]
      },
      activeName: '1'
    };
  },

  methods: {
    submit() {
      console.log('打印当前编辑：', this.form);

      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.$refs.editMap.isEdit) {
            this.$refs.editMap.onClickBtn();
          }
          if (!this.form.locations || this.form.locations.length < 1) {
            this.$modal.msgWarning('请先编辑点位');
            return;
          }
          // 验证成功-新增或者编辑
          this.$emit('change', this.form);
          this.close();
        }
      });
    },
    close() {
      this.form = {};
      this.$emit('update:show', false);
    },
    handleClick() {}
  }
};
</script>

<style lang="scss" scoped>
.app-container {
}
</style>
